<template>
   <div>
     <Row :gutter="16">
       <Col :lg="8" :md="24" class="margin-top-20">
         <Card>
           <div class="main-logo">
             <i class=" icon-logo"></i>
             <span class="notwrap logo-name">XX互联网服务有限公司</span>
             <span class="notwrap logo-info">后台数据统计一览界面</span>
           </div>
         </Card>
         <card class="demo-tabs-style2 margin-top-20">
           <Row type="flex" justify="center">
             <ButtonGroup>
               <Button
                       v-for="(item,index) in buttonGroup"
                       :key="index"
                       :disabled="buttonActive === index"
                       @click="buttonActive = index"
               >{{item.item}}</Button>
             </ButtonGroup>
           </Row>
           <Row class="data-panel">
             <Col :span="8" class="home-data-view">
               <p class="type">今日新增</p>
               <p class="value">78</p>
             </Col>
             <Col :span="8" class="home-data-view">
               <p class="type">一周内总增加</p>
               <p class="value">128</p>
             </Col>
             <Col :span="8" class="home-data-view">
               <p class="type">小镇商品总计</p>
               <p class="value">2108</p>
             </Col>
           </Row>
           <Row type="flex" justify="center" class="margin-top-20">
             <Button type="primary" shape="circle">点击查看趋势图</Button>
           </Row>
         </card>


       </Col>
       <Col :lg="16" :md="24" class="margin-top-20">
         <Card class="demo-tabs-style2">
           <div slot="title" class="card-title">
             <i class="icon icon-database"></i>
             售出商品
           </div>
           <a href="#" slot="extra" class="more">
             more >
           </a>
           <Row :gutter="16">
             <Col :lg="16" :md="24">
               <Row style="position: relative">
                 <div id="myChart" style="width:100%;height: 242px;">
                 </div>
                 <div class="toolBox">
                   <a>售出数 <i class="triangle"></i> </a>
                   <a>近一周 <i class="triangle"></i></a>
                 </div>
               </Row>
             </Col>
             <Col :lg="8" :md="24">
               <Row type="flex" justify="center">
                 <ButtonGroup>
                   <Button
                           v-for="(item,index) in buttonGroup2"
                           :key="index"
                           :disabled="buttonActive2 === index"
                           @click="buttonActive2 = index"
                   >{{item.item}}</Button>
                 </ButtonGroup>
               </Row>
               <Row>
                 <div id="myChart2" style="width:100%;height: 196px;overflow: hidden;"></div>
               </Row>
             </Col>
           </Row>

         </Card>

       </Col>
     </Row>
     <Row :gutter="16">
       <Col :lg="6" :md="12" :sm="24" class="margin-top-20">
         <Card class="demo-tabs-style2">
           <div slot="title" class="card-title">
             <i class="icon icon-team"></i>
             镇长
           </div>
           <a href="#" slot="extra" class="more">
             more >
           </a>
           <Row>
             <Col :span="8" class="home-data-view">
               <p class="type">今日新增</p>
               <p class="value">78</p>
             </Col>
             <Col :span="8" class="home-data-view">
               <p class="type">一周内总增加</p>
               <p class="value">128</p>
             </Col>
             <Col :span="8" class="home-data-view">
               <p class="type">小镇商品总计</p>
               <p class="value">2108</p>
             </Col>
           </Row>
         </Card>
       </Col>
       <Col :lg="6" :md="12" :sm="24" class="margin-top-20">
         <Card class="demo-tabs-style2">
           <div slot="title" class="card-title">
             <i class="icon icon-team"></i>
             加盟商
           </div>
           <a href="#" slot="extra" class="more">
             more >
           </a>
           <Row>
             <Col :span="8" class="home-data-view">
               <p class="type">今日新增</p>
               <p class="value">78</p>
             </Col>
             <Col :span="8" class="home-data-view">
               <p class="type">一周内总增加</p>
               <p class="value">128</p>
             </Col>
             <Col :span="8" class="home-data-view">
               <p class="type">小镇商品总计</p>
               <p class="value">2108</p>
             </Col>
           </Row>
         </Card>
       </Col >
       <Col :lg="6" :md="12" :sm="24" class="margin-top-20">
         <Card class="demo-tabs-style2">
           <div slot="title" class="card-title">
             <i class="icon icon-shop"></i>
             店铺
           </div>
           <a href="#" slot="extra" class="more">
             more >
           </a>
           <Row>
             <Col :span="8" class="home-data-view">
               <p class="type">今日新增</p>
               <p class="value">78</p>
             </Col>
             <Col :span="8" class="home-data-view">
               <p class="type">一周内总增加</p>
               <p class="value">128</p>
             </Col>
             <Col :span="8" class="home-data-view">
               <p class="type">小镇商品总计</p>
               <p class="value">2108</p>
             </Col>
           </Row>
         </Card>
       </Col>
       <Col :lg="6" :md="12" :sm="24" class="margin-top-20">
         <Card class="demo-tabs-style2">
           <div slot="title" class="card-title">
             <i class="icon icon-car"></i>
             卖车
           </div>
           <a href="#" slot="extra" class="more">
             more >
           </a>
           <Row >
             <Col :span="8" class="home-data-view">
               <p class="type">今日新增</p>
               <p class="value">78</p>
             </Col>
             <Col :span="8" class="home-data-view">
               <p class="type">一周内总增加</p>
               <p class="value">128</p>
             </Col>
             <Col :span="8" class="home-data-view">
               <p class="type">小镇商品总计</p>
               <p class="value">2108</p>
             </Col>
           </Row>
         </Card>
       </Col>

     </Row>
     <Row :gutter="16">
       <Col :lg="16" :md="24" class="margin-top-20">
         <Card class="demo-tabs-style1">
           <div slot="title" class="card-title">
             商城动态
           </div>
           <span class="more" slot="extra">2018年11月1日</span>
           <Row>
             <Col :lg="8" :md="24" class="chart-container">
               <div class="chart-title">
                 <span class="data">188</span>
                 <span class="item">今日新增用户</span>
               </div>
               <Row id="myChart3" style="width:100%;height: 190px"></Row>

             </Col>
             <Col :lg="8" :md="24" class="chart-container">
               <div class="chart-title">
                 <span class="data">43K</span>
                 <span class="item">今日投资额</span>
               </div>
               <Row id="myChart4" style="width:100%;height: 190px"></Row>
             </Col>
             <Col :lg="8" :md="24" class="chart-container">
               <div class="chart-title">
                 <span class="data">16</span>
                 <span class="item">今日订单数</span>
               </div>
               <Row id="myChart5" style="width:100%;height: 190px"></Row>
             </Col>
           </Row>

         </Card>

       </Col>
       <Col :lg="8" :md="24" class="margin-top-20">
         <Card>
           <Row class="goods-total-panel">
             <Col span="8" class="goods-total">
               <p class="type">今日新增商品</p>
               <p class="value">45</p>
             </Col>
             <Col span="8" class="goods-total">
               <p class="type">今日新增商品</p>
               <p class="value">45</p>
             </Col>
             <Col span="8" class="goods-total">
               <img src="../../../../static/images/gold.png" alt="">
             </Col>
           </Row>
         </Card>
         <Card class="margin-top-20">
           <Row class="goods-total-panel">
             <Col span="8" class="goods-total">
               <p class="type">今日新增会员</p>
               <p class="value">45</p>
             </Col>
             <Col span="8" class="goods-total">
               <p class="type">会员总数</p>
               <p class="value">4500</p>
             </Col>
             <Col span="8" class="goods-total">
               <img src="../../../../static/images/crown.png" alt="">
             </Col>
           </Row>
         </Card>


       </Col>

     </Row>
   </div>
</template>

<script>
  var echarts = require('echarts');
  export default {
    name: 'home',
    data() {
      return {
        buttonActive: 0,
        buttonGroup: [
          {item: '小镇商品'},
          {item: '三农商品'},
          {item: '云仓库商品'},
        ],
        buttonActive2: 0,
        buttonGroup2: [
          {item: '今日'},
          {item: '本周'},
          {item: '近一个月'},
        ],
      }
    },
    watch: {},
    computed: {
    },
    methods: {
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'))
        let myChart2 = echarts.init(document.getElementById('myChart2'))
        let myChart3 = echarts.init(document.getElementById('myChart3'))
        let myChart4 = echarts.init(document.getElementById('myChart4'))
        let myChart5 = echarts.init(document.getElementById('myChart5'))
        // 绘制图表
        myChart.setOption({
          legend:{
            textStyle:{
              fontSize: 14
            },
            left: 20,
            top: 10,
            itemGap: 20,
            data: [
              {
                name: '贷款商品',
                icon: 'circle',
                textStyle: {
                  color: '#8F96AA'
                },
              },
              {
                name: '以租代购商品',
                icon: 'circle',
                textStyle: {
                  color: '#8F96AA'
                },
              },
              {
                name: '一口价商品',
                icon: 'circle',
                textStyle: {
                  color: '#8F96AA'
                }
              }
            ]
          },
          grid:{
            x:50,
            y:70,
            x2:40,
            y2:30,
          },
          tooltip: {
            show: 'true',
            trigger: 'item',
            formatter: '日期：{b}<br />售出{c}件',
            backgroundColor: 'rgba(255,255,255,1)',
            position: 'top',
            textStyle: {
              color: '#8F96AA',
              fontSize: 12,
            },
            borderColor: 'rgba(230,234,242,1)',
            borderWidth: 2,
            padding: [3,10],
            axisPointer: {
              type: 'cross',
              crossStyle: {
                type: 'dotted'
              }

            },
          },
          xAxis: {
            data: [10.1,10.2,10.3,10.4,10.5,10.6,10.7,10.8],
            axisLine: {
              show: false
            },
            axisTick:{
              show: false
            },
            axisLabel: {
              color: '#8F96AA',
              fontSize: 11
            }
          },
          yAxis: {
            axisLine: {
              show: false
            },
            axisTick:{
              show: false
            },
            splitLine: {
              lineStyle: {
                type: 'dotted'
              }
            },
            axisLabel: {
              color: '#8F96AA',
              fontSize: 13
            }
          },
          series: [
            {
              name:'贷款商品',
              type:'line',
              yAxisIndex: 0,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#4B7EFE'
                  }, {
                    offset: 1,
                    color: '#fff'
                  }]),
                  opacity: .2
                }
              },
              lineStyle: {
                normal: {
                  color: '#4B7EFE',
                  width: 1
                }
              },
              itemStyle: {
                normal: {
                  color: '#4B7EFE',
                }
              },
              symbolSize: 5,
              smooth: true,
              smoothMonotone: 'none',
              data:[15,21,18,15,22,28,21,24]
            },
            {
              name:'以租代购商品',
              type:'line',
              yAxisIndex: 0,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#FEC400'
                  }, {
                    offset: 1,
                    color: '#fff'
                  }]),
                  opacity: .2
                }
              },
              lineStyle: {
                normal: {
                  color: '#FEC400',
                  width: 1
                }
              },
              itemStyle: {
                normal: {
                  color: '#FEC400',
                }
              },
              symbolSize: 5,
              smooth: true,
              smoothMonotone: 'none',
              data:[ 20,10,17,12,8,18,14,13]
            },
            {
              name:'一口价商品',
              type:'line',
              yAxisIndex: 0,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#25CB95'
                  }, {
                    offset: 1,
                    color: '#fff'
                  }]),
                  opacity: .2
                }
              },
              lineStyle: {
                normal: {
                  color: '#25CB95',
                  width: 1
                }
              },
              itemStyle: {
                normal: {
                  color: '#25CB95',
                }
              },
              symbolSize: 5,
              smooth: true,
              smoothMonotone: 'none',
              data:[7,20,24,20,15,16,22,26]
            },
          ]
        });

        //绘制饼图
        myChart2.setOption({
          legend: {
            left: 0,
            top:  200,
            data:[
              {
                name: '贷款商品',
                icon: ''
              }
            ]
          },
          grid: {

          },
          tooltip: {
            trigger: 'item',
            formatter: "{d}%",
            position: ['45%','100%'],
            backgroundColor: '#fff',
            textStyle: {
              color: '#535965',
              fontSize: 16,
            },
            confine: 'true',
            padding: 0,
          },

          series: [
            {
              name:'访问来源',
              type:'pie',
              radius: ['45%', '65%'],
              hoverOffset: 7,
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '14',
                    // fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: 'false'
                }
              },
              data:[
                {
                  value:335,
                  name:'贷款商品',
                  itemStyle: {
                    normal: {
                      color: '#4B7EFE'
                    }
                  }
                },
                {
                  value:310,
                  name:'以租代购商品',
                  itemStyle: {
                    normal: {
                      color: '#FEC400'
                    }
                  }
                },
                {
                  value:234,
                  name:'一口价商品',
                  itemStyle: {
                    normal: {
                      color: '#25CB95'
                    }
                  }
                },

              ]
            }
          ]
        })

        myChart2.on('mouseover', function (params) {
          if (params.componentType === 'series') {

            if (params.seriesType === 'pie') {

            }
          }

        });

        //绘制折现图 3,4,5
        myChart3.setOption({
          grid:{
            x:40,
            y:40,
            x2:40,
            y2:30,
            borderWidth:1
          },
          xAxis: {
            data: [10.5,10.6,10.7,10.8,10.9,10.10,10.11],
            axisLine: {
              show: false
            },
            axisTick:{
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dotted'
              }
            },
            axisLabel: {
              color: '#8F96AA',
              fontSize: 11
            }
          },
          yAxis: {
            axisLine: {
              show: false
            },
            axisTick:{
              show: false
            },
            splitLine: {
              lineStyle: {
                type: 'dotted'
              }
            },
            axisLabel: {
              color: '#8F96AA',
              fontSize: 13
            }
          },
          series: [
            {
              name:'今日新增',
              type:'line',
              yAxisIndex: 0,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#71BFFF'
                  }, {
                    offset: 1,
                    color: '#fff'
                  }])
                }
              },
              lineStyle: {
                normal: {
                  color: '#71BFFF',
                  width: 1
                }
              },
              itemStyle: {
                normal: {
                  color: '#71BFFF',
                }
              },
              symbolSize: 1,
              smoothMonotone: 'none',
              data:[15,21,18,15,22,28,21]
            },

          ]
        })
        myChart4.setOption({
          grid:{
            x:40,
            y:40,
            x2:40,
            y2:30,
            borderWidth:1
          },
          xAxis: {
            data: [10.5,10.6,10.7,10.8,10.9,10.10,10.11],
            axisLine: {
              show: false
            },
            axisTick:{
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dotted'
              }
            },
            axisLabel: {
              color: '#8F96AA',
              fontSize: 11
            }
          },
          yAxis: {
            axisLine: {
              show: false
            },
            axisTick:{
              show: false
            },
            splitLine: {
              lineStyle: {
                type: 'dotted'
              }
            },
            axisLabel: {
              color: '#8F96AA',
              fontSize: 13
            }
          },
          series: [
            {
              name:'今日新增',
              type:'line',
              yAxisIndex: 0,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#71BFFF'
                  }, {
                    offset: 1,
                    color: '#fff'
                  }])
                }
              },
              lineStyle: {
                normal: {
                  color: '#71BFFF',
                  width: 1
                }
              },
              itemStyle: {
                normal: {
                  color: '#71BFFF',
                }
              },
              symbolSize: 1,
              smoothMonotone: 'none',
              data:[15,21,18,15,22,28,21]
            },

          ]
        })
        myChart5.setOption({
          grid:{
            x:40,
            y:40,
            x2:40,
            y2:30,
            borderWidth:1
          },
          xAxis: {
            data: [10.5,10.6,10.7,10.8,10.9,10.10,10.11],
            axisLine: {
              show: false
            },
            axisTick:{
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dotted'
              }
            },
            axisLabel: {
              color: '#8F96AA',
              fontSize: 11
            }
          },
          yAxis: {
            axisLine: {
              show: false
            },
            axisTick:{
              show: false
            },
            splitLine: {
              lineStyle: {
                type: 'dotted'
              }
            },
            axisLabel: {
              color: '#8F96AA',
              fontSize: 13
            }
          },
          series: [
            {
              name:'今日新增',
              type:'line',
              yAxisIndex: 0,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#71BFFF'
                  }, {
                    offset: 1,
                    color: '#fff'
                  }])
                }
              },
              lineStyle: {
                normal: {
                  color: '#71BFFF',
                  width: 1
                }
              },
              itemStyle: {
                normal: {
                  color: '#71BFFF',
                }
              },
              symbolSize: 1,
              smoothMonotone: 'none',
              data:[15,21,18,15,22,28,21]
            },

          ]
        })
        window.addEventListener("resize", function () {
          myChart.resize();
          myChart2.resize();
          myChart3.resize();
          myChart4.resize();
          myChart5.resize();
        });
      }


    },
    created() {

    },
    mounted() {
      this.drawLine();
    }
  }
</script>

<style lang="less">
  @import "home";
</style>
